<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
       <div class="a">
          
       </div>

       <div class="b">
          
    </div>
    <div class="c">
          
    </div>
    <div class="d">
          
    </div>
      
       <div class="triangle_a1"></div>
       <div class="triangle_a2"></div>
       <div class="triangle_b1"></div>
       <div class="triangle_b2"></div>
       <div class="triangle_c1"></div>
       <div class="triangle_c2"></div>



    </div>
    
</body>
<style>
   .box{
       width: 275px;
       height:60px;
       position: relative;
       background-color: #cccccc;
       overflow: hidden;
       border-radius: 60px;
   }
   .triangle_a1{
       position: absolute;
       left: 60px;
    width: 0;
    height: 0;
    border-top: 34px solid transparent;
    border-left: 39px solid orange;
    border-bottom: 34px solid transparent;
    top: -4px;
    z-index: 10;
   }

   .triangle_a2{
       position: absolute;
       left: 60px;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-left: 35px solid blue;
    border-bottom: 30px solid transparent;
    z-index: 20;
   }

   .triangle_b1{
       position: absolute;
       left: 120px;
    width: 0;
    height: 0;
    border-top: 34px solid transparent;
    border-left: 39px solid orange;
    border-bottom: 34px solid transparent;
    top: -4px;
    z-index: 10;
   }

   .triangle_b2{
       position: absolute;
       left: 180px;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-left: 35px solid blue;
    border-bottom: 30px solid transparent;
    z-index: 20;
   }

   .triangle_c1{
       position: absolute;
       left: 180px;
    width: 0;
    height: 0;
    border-top: 34px solid transparent;
    border-left: 39px solid #ffffff;
    border-bottom: 34px solid transparent;
    top: -4px;
    z-index: 10;
   }

   .triangle_c2{
       position: absolute;
       left: 120px;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-left: 35px solid blue;
    border-bottom: 30px solid transparent;
    z-index: 20;
   }
  
  
  
   .a{
       width: 60px;
       height: 100%;
       background-color: blue;
       position: absolute;
      
   }
   .b{
       width: 60px;
       height: 100%;
       background-color: blue;
       position: absolute;
       left: 60px;
      
   }
   .c{
       width: 60px;
       height: 100%;
       background-color: blue;
       position: absolute;
       left: 120px;
      
   }
   .d{
       width: 95px;
       height: 100%;
       background-color: #cccccc;
       position: absolute;
       left: 180px;
      
   }
</style>
</html>